<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" :rules="rulesRul">
          <el-form-item label="用户名" prop="username">
            <el-input
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.username"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="userPassworld">
            <el-input
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.userPassworld"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="cellphoneNumber">
            <el-input
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.cellphoneNumber"
            ></el-input>
          </el-form-item>

         
        </el-form>
      </div>

      <div slot="outerFooter" v-if="!this.fromDisabled">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)">保存</el-button>
      </div>
      <div slot="outerFooter" v-else>
        <el-button @click="($event) => buttonClickHandler(0)">关闭</el-button>
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import {getDateFUnction} from '@/components/config/index'
import DialogTemplate from "@/components/DialogTemplate.vue";
import { dressingByScreening , algorithm} from "@/components/config/index";
import { editUserFunction } from "@/api/login";
export default {
  components: {
    DialogTemplate,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "默认为测试标题",
        outWidth: "40%",
        destroyOnClose: true,
        top:'200px',
      },
      
      fromData: {
        userId:'',
        username: "",
        cellphoneNumber: "",
        userPassworld: "",
      },
      rulesRul: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        cellphoneNumber: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        userPassworld: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
      },
      fromDisabled: true,
      titleType: "",
    };
  },

  methods: {
    //开启弹框
    handleOpen(val, titleType) {
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
      this.dialogData.title = "账号信息 -- " + titleType;
      //2.打开弹框后 判断里面的数据是否可以编辑
      this.titleType = titleType;
      this.fromDisabled = titleType == "编辑" ? false : true
      //3.为页面赋初始值
      if(val) this.fromData = dressingByScreening({ ...this.fromData }, { ...val }); 
    },
    //弹出框关闭的回调
    closeHanler() {
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        this.$refs.formRef.validate((vaild) => {
          if (vaild) {
            this.fromData.userEntryTime = getDateFUnction()
            this.editDataFunction()
          }
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },

    //编辑数据
    editDataFunction() {
      console.log("编辑数据的参数",this.fromData)
      editUserFunction(this.fromData).then((res) => {
        if(!res.data.acknowledged)  this.$notify.error({ title: "提示", message:'编辑失败'})
        else {
          this.$notify.success({ title: "提示", message: "数据编辑成功" });
          this.$refs.DialogTemplateRef?.closeDialogOne();
          this.$emit("resData", "编辑");
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
:deep(.el-input__icon){
  line-height: 35px;
}
</style>
